<template>
    <el-form class="login-content-form">
		<el-form-item class="login-animation-one">
			<el-input type="text" placeholder="请输入用户名" focus v-model="ruleForm.username" clearable autocomplete="off">
				<template #prefix>
					<el-icon class="el-input__icon"><elementUser /></el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation-two">
			<el-input
				:type="isShowPassword ? 'text' : 'password'"
				placeholder="请输入密码"
				v-model="ruleForm.password"
				autocomplete="off"
			>
				<template #prefix>
					<el-icon class="el-input__icon"><elementUnlock /></el-icon>
				</template>
				<template #suffix>
					<i
						class="iconfont el-input__icon login-content-password"
						:class="isShowPassword ? 'icon-xianshimima' : 'icon-yincangmima'"
						@click="isShowPassword = !isShowPassword"
					>
					</i>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation-three">
			<el-row :gutter="15">
				<el-col :span="16">
					<el-input
						type="text"
						maxlength="4"
						placeholder="请输入验证码"
						v-model="ruleForm.code"
						clearable
						autocomplete="off"
					>
						<template #prefix>
							<el-icon class="el-input__icon"><elementPosition /></el-icon>
						</template>
					</el-input>
				</el-col>
				<el-col :span="8">
					<div class="login-content-code">
						<span class="login-content-code-img">1234</span>
					</div>
				</el-col>
			</el-row>
		</el-form-item>
		<el-form-item class="login-animation-four">
			<el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">登录</el-button>
		</el-form-item>
	</el-form>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import {useRoute, useRouter} from 'vue-router'
import { useStore } from '@/store/index';
import { loginServe} from '@/api/loginServ'
import { I_loginArgs } from '@/views/login/login.d';
import { ElMessage } from 'element-plus'
import {Session} from '@/utils/storage'
import { initFrontEndControlRoutes } from '@/router/frontEnd';
const route = useRoute();
const store = useStore()
const router = useRouter();
const isShowPassword= ref<boolean>(false);
const loading = reactive<{signIn: boolean}>({signIn: false});
const ruleForm = reactive<I_loginArgs>({
    username: 'admin',
    password: '123456',
    code: '1234',
})
// 登录
async function onSignIn() {
	const {data, code, msg} = await loginServe(ruleForm)
	if (code != 0) {
		ElMessage.error(msg);
		return
	}
	Session.set('token', data.token)
	Session.set('userData', data.userData)

	if (!store.state.themeConfig.themeConfig.isRequestRoutes) {
		// 前端控制路由，2、请注意执行顺序
		await initFrontEndControlRoutes();
	}
	signInSuccess();
}

// 登录成功后 跳转
function signInSuccess() {
	const {redirect='', params=''} = route.query as {redirect:string, params:string}
	if(redirect){
		let routeObj : any = {
			path: redirect
		}
		if(params && Object.keys(JSON.parse(params)).length > 0){
			routeObj.query= JSON.parse(params)
		}
		router.push(routeObj)
	} else {
		router.push('/')
	}
}	

</script>

<style scoped lang="less">

.login-content-form {
	margin-top: 20px;
	.login-animation-one,
	.login-animation-two,
	.login-animation-three,
	.login-animation-four,
	.login-animation-five {
		animation-name: error-num;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
	}
	.login-animation-one {
		animation-delay: 0.1s;
	}
	.login-animation-two {
		animation-delay: 0.2s;
	}
	.login-animation-three {
		animation-delay: 0.3s;
	}
	.login-animation-four {
		animation-delay: 0.4s;
		margin-bottom: 5px;
	}
	.login-animation-five {
		animation-delay: 0.5s;
	}
	.login-content-password {
		display: inline-block;
		width: 25px;
		cursor: pointer;
		&:hover {
			color: #909399;
		}
	}
	.login-content-code {
		display: flex;
		align-items: center;
		justify-content: space-around;
		.login-content-code-img {
			width: 100%;
			height: 40px;
			line-height: 40px;
			background-color: #ffffff;
			border: 1px solid rgb(220, 223, 230);
			color: #333;
			font-size: 16px;
			font-weight: 700;
			letter-spacing: 5px;
			text-indent: 5px;
			text-align: center;
			cursor: pointer;
			transition: all ease 0.2s;
			border-radius: 4px;
			user-select: none;
			&:hover {
				border-color: #c0c4cc;
				transition: all ease 0.2s;
			}
		}
	}
	.login-content-submit {
		width: 100%;
		letter-spacing: 2px;
		font-weight: 300;
		margin-top: 15px;
	}
}
</style>